<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" charset="utf-8" />
    <meta http-equiv="content-type" content="text/html" />
    <title>demo</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
#list{height:250px;list-style-type:none;overflow:hidden;}
#luanpo{max-width:600px;height:200px;border:1px solid #CCC;margin:0 auto;position:relative;overflow:hidden;}

#imgs li{float:left;height:200px;width:600px;}
#imgs{height:200px;background:#ddd;position:absolute;}
.a{background:red;}
.b{background:yellow;}

#num{overflow:auto;position:absolute;right:0;bottom:0;}
#num li{float:left;height:30px;width:30px;text-align:center;line-height:30px;border:1px solid #CCC;margin-left:10px;cursor:pointer;z-index:2222;}
</style>
<body>
    <div id="J_Slider">
        <ul id="imgs">
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ul>
        <ul id="num">
            <li class="a">1</li>
            <li class="b">2</li>
            <li class="b">3</li>
            <li class="b">4</li>
        </ul>
    
    </div>


<script type="text/javascript">
	var slider = {
		initialize: function( options ) {
			this.slideElem = document.getElementById(options.slideId || 'imgs');
			this.thumbElem = document.getElementById(options.thumbId || "num");
			this.slides = this.slideElem.getElementsByTagName('li');
			this.thumbs = this.thumbElem.getElementsByTagName("li");
			this.delay = options.delay || 3000;
			this.autoPlay = options.autoPlay || false;
			
			this.prevIndex = 0;
			this.currIndex = 0;
			this.intervalId = null;

			this.slideElem.style.width = this.slides.length * this.slides[0].offsetWidth + "px";

			this.autoPlay && this.start();
		},
		change: function() {
			var _this, item;

			for ( var i = 0; i < this.thumbs.length; i++ ) {
				item = this.thumbs[i];

				item.index = i;
				item.onclick = function() {
					clearInterval(_this.intervalId);

					_this.currIndex = this.index;
					_this.changeThumbClass();

					_this.slideElem.style.left = -(_this.slides[0].offsetWidth * _this.currIndex) + "px";         
				};
				item.onmouseout = function() {
					_this.autoPlay && _this.start();
				};
			}
		},
		changeThumbClass: function() {
			for ( var i = 0; i < this.thumbs.length; i++ ) {
				if ( this.currIndex == this.thumbs[k].index ) {
					this.thumbs[k].className = 'a';
				} else {
					this.thumbs[k].className = 'b';
				}
			}
		},
		changeIndex: function() {
			if ( this.currIndex >= this.thumbs.length - 1 ) {
				this.currIndex = 0;
			} else {
				this.currIndex++;
			}
		},
		start: function() {
			var _this = this;

			this.intervalId && clearInterval(this.intervalId);
			this.intervalId = setInterval(function() {
				_this.changeIndex();
				_this.changeThumbClass();

				_this.slideElem.style.left = -(_this.slides[0].offsetWidth * _this.currIndex) + "px";
			}, this.delay);

			this.change();
		}
	};
</script>
</body>
</html>